<template>
  <div class="lobby">
    <div class="swipe">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in form.task_ad_list" :key="index">
          <div @click="goDetails(item.type,item.task_id)">
            <img :src="item.img_url" alt="">
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="lobbyMain">
      <div class="select">
        <div @click="showActionsheet(0)"><span>{{typeFilter.name}}</span><img src="@/assets/images/ic_down.png" alt="">
        </div>
        <div @click="showActionsheet(1)"><span>{{sortFilter.name}}</span><img src="@/assets/images/ic_down.png" alt="">
        </div>
      </div>
      <div class="btn">
        <input v-for="(item,index) in form.condition_list" :class="btnActive == item.condition? 'active':''"
               type="button" :value="item.name" @click="btnChange(item.condition)">
      </div>

    </div>
    <div class="content" id="content">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false"
                   @bottom-status-change="handleBottomChange" @top-status-change="handleTopChange"
                   :bottom-all-loaded="allLoaded" ref="loadmore">

        <div class="li" v-for="(item,index) in list" :key="index" @click="goDetails(2,item.task_id)">
          <div class="tip" v-if="item.task_type === 1">{{item.user_fit_cash}}元</div>
          <div class="tip" v-else-if="item.task_type === 2">{{item.user_fit_score}}工分</div>
          <div class="tip3" v-else-if="item.task_type === 3" @click.stop="imagePreview(item.prizes_img_url)"><img
            :src="item.prizes_img_url" alt=""></div>
          <div class="details">
            <div class="left">
              <img :src="item.img_url" alt="">
            </div>
            <div class="right">
              <div class="div">{{item.title}}</div>
              <div class="div">{{item.short_intro}}</div>
              <div class="img">
                <img src="@/assets/images/ic_stars.png" alt="" v-for="i in item.difficulty_star">
                <img src="@/assets/images/ic_stars2.png" alt="" v-for="i in (5-item.difficulty_star)">
              </div>
            </div>
          </div>
        </div>
        <div class="loadShow" v-show="allLoaded">暂无更多！</div>
        <div slot="bottom" class="mint-loadmore-bottom" v-show="!allLoaded&&topStatus!=='loading'">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加载</span>
          <span v-show="bottomStatus === 'loading'">加载中</span>
        </div>
      </mt-loadmore>
    </div>
    <van-popup v-model="typeShow" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        :title="typeFilter.name"
        value-key="name"
        :columns="form.task_type_list"
        @cancel="onCancel"
        @confirm="onConfirm0"
      />
    </van-popup>
    <van-popup v-model="sortShow" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        :title="sortFilter.name"
        value-key="name"
        :columns="form.task_sort_list"
        @cancel="onCancel"
        @confirm="onConfirm1"
      />
    </van-popup>
  </div>
</template>

<script>
  import {List} from 'vant';
  import {ImagePreview} from 'vant';
  import {Indicator} from 'mint-ui';

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        typeFilter: {},
        typeShow: false,//左上拉菜单
        sortFilter: {},
        sortShow: false,//右上拉菜单
        btnActive: 1,
        form: {},
        list: [],
        filters: {
          page_index: 1,
          page_count: 7,
          filter_type: 1,
          filter_type_id: undefined,
          sort_type: 1,
          condition: 1,
        },
        allLoaded: false,
        bottomStatus: '',
        topStatus: '',
      }
    },
    computed: {},
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      /*
      * 上拉加载
      * */
      loadBottom() {
        this.filters.page_index++;
        this.handleBottomChange("loading");//上拉时 改变状态码
        this.taskList();
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.list = [];
        this.allLoaded = false;
        this.taskList();
      },
      loadData() {
        Indicator.open('加载中...');
        this.$axios.taskHallIndex().then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
          this.typeFilter = res.data.task_type_list[0];
          this.filters.filter_type_id = res.data.task_type_list[0].id;
          this.sortFilter = res.data.task_sort_list[0];
          this.taskList();
        })
      },
      taskList() {
        Indicator.open('加载中...');
        this.$axios.taskList(this.filters).then(res => {
          Indicator.close();
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          res.data.forEach(item => {
            this.list.push(item);
          });
          this.$nextTick(() => {
            if (this.filters.page_index)
              document.getElementById('content').scrollTop = 0
          });
          if (res.data.length < this.filters.page_count) {
            this.allLoaded = true;// 若数据已全部获取完毕
          }
        })
      },
      /*
      * btn切换
      * */
      btnChange(e) {
        this.btnActive = e;
        this.filters.condition = e;
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.list = [];
        this.allLoaded = false;
        this.taskList();
      },
      onConfirm0(value, index) {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.list = [];
        this.allLoaded = false;
        this.typeShow = false;
        this.typeFilter = value;
        this.filters.filter_type_id = value.id;
        this.filters.filter_type = value.filter_type;
        this.taskList();
      },
      onConfirm1(value, index) {
        this.filters.page_count = 7;
        this.filters.page_index = 1;
        this.list = [];
        this.allLoaded = false;
        this.sortShow = false;
        this.sortFilter = value;
        this.filters.sort_type = value.sort_type;
        this.taskList();
      },
      onCancel() {
        this.typeShow = false;
        this.sortShow = false;
      },
      showActionsheet(e) {
        if (e === 0) {
          this.typeShow = true;
        } else {
          this.sortShow = true;
        }
      },
      /**
       * 详情
       */
      goDetails(type, id) {
        if (type === 1) {
          return false;
        } else if (type === 2) {
          this.$router.push({
            path: '/lobbyDetails',
            query: {task_id: id}
          })
        }
      },
      /*
      * 查看图片
      * */
      imagePreview(imgUrl) {
        let imgArr = [];
        imgArr.push(imgUrl);
        ImagePreview(imgArr);
      }

    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .lobby {
    height: 100%;
    text-align: center;

    .van-popup {
      border-radius: 0;
    }

    .swipe {
      width: 100%;
      height: 2.5rem;
      overflow: hidden;

      .van-swipe {
        height: 2.5rem;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .lobbyMain {
      padding: 0 0.33rem;
      box-sizing: border-box;
    }

    .select {
      margin-top: 0.6rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #333333;
      font-size: 0.28rem;

      div {
        display: flex;
        align-items: center;

      }

      img {
        width: 0.17rem;
        height: 0.1rem;
        margin-left: 0.2rem;
      }
    }

    .btn {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0.26rem 0 0.38rem 0;

      input {
        background: rgba(245, 245, 246, 1);
        border: 0;
        font-size: 0.26rem;
        border-radius: 0.1rem;
        width: 1.42rem;
        color: #CECFD3;
        height: 0.5rem;
      }

      .active {
        background: rgb(255, 245, 219, 1);
        color: #FDCC4A;
      }
    }

    .content {
      padding: 0 0.33rem;
      box-sizing: border-box;
      width: 100%;
      position: absolute;
      top: 4.6rem;
      bottom: 1rem;
      overflow: auto;

      .li {
        position: relative;
        width: 100%;
        height: 2.1rem;
        border-top: 1px solid rgba(239, 239, 239, 0.5);

        .tip {
          font-size: 0.3rem;
          position: absolute;
          top: 0px;
          right: 0px;
          width: 1.42rem;
          height: 0.5rem;
          line-height: 0.5rem;
          background: #FF695A;
          -webkit-border-radius: 0 0 0.1rem 0.1rem;
          -moz-border-radius: 0 0 0.1rem 0.1rem;
          border-radius: 0 0 0.1rem 0.1rem;
          color: #FFFFFF;
        }

        .tip3 {
          position: absolute;
          top: 0.5rem;
          right: 0px;
          width: 1rem;
          height: 1rem;

          img {
            width: 1rem;
            height: 1rem;
          }
        }

        .details {
          width: 100%;
          height: 2.1rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .left {
            width: 1.56rem;
            height: 1.56rem;
            margin-right: 0.2rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .right {
            width: 5rem;
            height: 1.56rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 0.36rem;

            .div:first-child {
              text-align: left;
              word-break: break-all;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
              -webkit-line-clamp: 2;
            }

            .div:nth-child(2) {
              color: #A6A6A6;
              display: block;
              font-size: 0.26rem;
              text-align: left;
              width: 5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }

            .img {
              display: flex;
              flex-direction: row;
              justify-content: left;

              img {
                width: 0.39rem;
                height: 0.38rem;
                margin-right: 0.16rem;
              }
            }
          }
        }

      }

      .li:last-child {
        border-bottom: 1px solid rgba(239, 239, 239, 0.5);
      }
    }
  }
</style>
